<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation - Fx/Fx.Elements</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Fx-Elements">Fx.Elements</a></h4>
      <div class="menu-item"><a href="#Fx-Elements:set">set</a></div>
      <div class="menu-item"><a href="#Fx-Elements:start">start</a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Fx-Elements"><a href="#Fx-Elements">Class: Fx.Elements</a></h1>
      <p class="description">Fx.Elements allows you to apply any number of styles transitions to a collection of Elements.</p>
      <h3>Extends</h3>
      <p><a href="../../../docs/core/Fx/Fx.html">Fx</a></p>
      <h3>Syntax</h3>
      <pre class="javascript"><span class="kw2">new</span> Fx.<span class="me1">Elements</span><span class="br0">(</span>elements<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>elements - (<em>array</em>) A collection of Elements the effects will be applied to.</li>
        <li>options  - (<em>object</em>, optional) Same as <a href="../../../docs/core/Fx/Fx.html">Fx</a> options.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) A new Fx.Elements instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Elements</span><span class="br0">(</span>$$<span class="br0">(</span><span class="st0">'.myElementClass'</span><span class="br0">)</span>, <span class="br0">{</span>

    onComplete: <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
        <span class="kw3">alert</span><span class="br0">(</span><span class="st0">'complete'</span><span class="br0">)</span>;
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>.<span class="me1">start</span><span class="br0">(</span><span class="br0">{</span>

    <span class="st0">'0'</span>: <span class="br0">{</span>
        <span class="st0">'height'</span>: <span class="br0">[</span><span class="nu0">200</span>, <span class="nu0">300</span><span class="br0">]</span>,
        <span class="st0">'opacity'</span>: <span class="br0">[</span><span class="nu0">0</span>,<span class="nu0">1</span><span class="br0">]</span>

    <span class="br0">}</span>,
    <span class="st0">'1'</span>: <span class="br0">{</span>
        <span class="st0">'width'</span>: <span class="br0">[</span><span class="nu0">200</span>, <span class="nu0">300</span><span class="br0">]</span>,
        <span class="st0">'opacity'</span>: <span class="br0">[</span><span class="nu0">1</span>,<span class="nu0">0</span><span class="br0">]</span>

    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h3>Notes</h3>
      <ul>
        <li>Includes colors but must be in hex format.</li>
      </ul>
      <h2 id="Fx-Elements:set"><a href="#Fx-Elements:set">Fx.Elements Method: set</a></h2>
      <p class="description">Applies the passed in style transitions to each object named immediately (see example).</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">set</span><span class="br0">(</span>to<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>to - (<em>object</em>) An object where each item in the collection is refered to as a numerical string ("1" for instance). The first item is "0", the second "1", etc.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Elements instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myFx = <span class="kw2">new</span> Fx.<span class="me1">Elements</span><span class="br0">(</span>$$<span class="br0">(</span><span class="st0">'.myClass'</span><span class="br0">)</span><span class="br0">)</span>.<span class="me1">set</span><span class="br0">(</span><span class="br0">{</span>

    <span class="st0">'0'</span>: <span class="br0">{</span>
        <span class="st0">'height'</span>: <span class="nu0">200</span>,
        <span class="st0">'opacity'</span>: <span class="nu0">0</span>
    <span class="br0">}</span>,
    <span class="st0">'1'</span>: <span class="br0">{</span>

        <span class="st0">'width'</span>: <span class="nu0">300</span>,
        <span class="st0">'opacity'</span>: <span class="nu0">1</span>
    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>
      <h2 id="Fx-Elements:start"><a href="#Fx-Elements:start">Fx.Elements Method: start</a></h2>
      <p class="description">Applies the passed in style transitions to each object named (see example).</p>
      <h3>Syntax</h3>
      <pre class="javascript">myFx.<span class="me1">start</span><span class="br0">(</span>obj<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>obj - (<em>object</em>) An object where each item in the collection is refered to as a numerical string ("1" for instance). The first item is "0", the second "1", etc.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) This Fx.Elements instance.</li>
      </ul>
      <h3>Examples</h3>
      <pre class="javascript"><span class="kw2">var</span> myElementsEffects = <span class="kw2">new</span> Fx.<span class="me1">Elements</span><span class="br0">(</span>$$<span class="br0">(</span><span class="st0">'a'</span><span class="br0">)</span><span class="br0">)</span>;
myElementsEffects.<span class="me1">start</span><span class="br0">(</span><span class="br0">{</span>

    <span class="st0">'0'</span>: <span class="br0">{</span> <span class="co1">//let's change the first element's opacity and width</span>
        <span class="st0">'opacity'</span>: <span class="br0">[</span><span class="nu0">0</span>,<span class="nu0">1</span><span class="br0">]</span>,
        <span class="st0">'width'</span>: <span class="br0">[</span><span class="nu0">100</span>,<span class="nu0">200</span><span class="br0">]</span>

    <span class="br0">}</span>,
    <span class="st0">'4'</span>: <span class="br0">{</span> <span class="co1">//and the fifth one's opacity</span>
        <span class="st0">'opacity'</span>: <span class="br0">[</span><span class="nu0">0.2</span>, <span class="nu0">0.5</span><span class="br0">]</span>

    <span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
